<template>
      <el-menu
      :style="{width:!isCollapse ? '180px ':'64px'}"
        background-color="#545c64"
        class="aside-container"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse" >
        <p class="logo-lg">{{isCollapse ?'管理': '管理系统'}}</p>
        <treeMenu :menuData="menuData"/>
      </el-menu>
    
</template>
<script setup>
import treeMenu from './treeMenu.vue';
import {useRouter} from 'vue-router'
import {reactive,computed} from 'vue'
import { useStore } from 'vuex'; 
const router= useRouter()
// console.log(router,'router')
const menuData=reactive(router.options.routes[0].children)
const store=useStore()
const isCollapse = computed(() => store.state.menu.isCollapse)
const handleOpen = () => {
}
const handleClose = () => {
}
</script>


<style lang="less" scoped>
.aside-container {
    height: 100%;
    width: 180px;
    .logo-lg{
      font-size: 20px;
      text-align: center;
      color: #fff;
      height: 20px;
      line-height: 20px;
    }
}
</style>